<template>
	<view class="content">
		<uni-nav-bar title="封神榜" color="#fff" backgroundColor="transparent" :border="false" :statusBar="true" :fixed="true"
			@clickLeft="$c.back()">
			<view class="uni-nav-bar-l-icon" slot="left">
				<view class="uni-nav-bar-l-icon-left icon">
					<image :src="$img('/static/img2/cc20.png')" lazy-load></image>
				</view>
			</view>
		</uni-nav-bar>

		<view class="hd-rank c_bg" :style="{
        backgroundImage: `url(${$img('/static/img2/cc32.png')})`
      }">
			<view class="rank-item c_bg" v-for="(item, i) in listData1" :key="i" :class="[`th${item.rank_num}`]">
				<view class="avatar">
					<view class="icon">
						<image :src="rankPics[i]" lazy-load></image>
					</view>

					<image :src="item.headimg" lazy-load></image>
				</view>

				<view class="name hang1">
					{{ item.nickname }}
				</view>

				<view class="num break">登顶{{ item.number }}次</view>
			</view>
		</view>

		<view class="bd-rank">
			<view class="rank-item" v-for="(item, i) in listData2" :key="i">
				<view class="num">{{ item.rank_num }}</view>

				<view class="avatar">
					<image :src="item.headimg" lazy-load></image>
				</view>

				<view class="name hang1">
					{{ item.nickname }}
				</view>

				<view class="money">登顶{{ item.number }}次</view>
			</view>
		</view>

		<view v-if="myRank" class="my-rank">
			<view class="my-item">
				<view class="num">{{ myRank.rank || '未上榜' }}</view>

				<view class="avatar">
					<image :src="myRank.headimg" lazy-load></image>
				</view>

				<view class="name hang1">
					{{ myRank.nickname }}
				</view>

				<view class="money">{{ myRank.money }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rankPics: [
					this.$img('/static/img2/cc33.png'),
					this.$img('/static/img2/cc35.png'),
					this.$img('/static/img2/cc34.png')
				],
				tabCur: 0,
				listData1: [],
				listData2: [],
				myRank: '',
				id: ''
			}
		},

		onLoad(opt) {
			this.id = opt.id
		},
		onShow() {
			this.getData()
		},

		methods: {
			doReload() {
				this.getData()
			},

			/* 分类切换 */
			tabChange(i) {
				this.tabCur = i
				this.listData1 = []
				this.listData2 = []
				this.getData()
			},

			/**
			 * @description: 获取数据
			 * @return {*}
			 */
			getData() {
				this.req({
					url: 'climb_ranks',
					data: {
						goods_id: this.id
					},
					success: res => {
						if (res.status == 1) {
							this.listData1 = res.data.data.list.splice(0, 3)
							this.listData2 = res.data.data.list
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		// padding-bottom: 250rpx;
		padding-bottom: 50rpx;

		.tab {
			padding: 20rpx 30rpx 0;
			display: flex;
			justify-content: space-between;

			.tab-item {
				width: 210rpx;
				height: 76rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				filter: grayscale(1);

				font-family: 光良酒-干杯体, 光良酒-干杯体;
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;

				&.act {
					filter: grayscale(0);
				}
			}

			.c_bg {}
		}

		.hd-rank {
			margin: 116rpx auto 0;
			width: 694rpx;
			height: 238rpx;
			position: relative;

			.rank-item {
				width: 190rpx;
				// height: 358rpx;
				display: flex;
				flex-flow: column nowrap;
				align-items: center;
				position: absolute;

				.avatar {
					width: 116rpx;
					height: 116rpx;
					border-radius: 50%;
					border: 4rpx solid #000000;
					position: relative;

					image {
						width: 100%;
						height: 100%;
						border-radius: inherit;
					}

					.icon {
						width: 92rpx;
						height: 92rpx;
						position: absolute;
						top: 0;
						right: 0;
						transform: translate(35%, -60%);
						z-index: 1;
					}
				}

				.name {
					padding: 8rpx 10rpx 0;
					width: 100%;
					box-sizing: border-box;
					text-align: center;

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #ffffff;
				}

				.hang1 {}

				.num {
					padding: 4rpx 10rpx 0;
					width: 100%;
					box-sizing: border-box;
					text-align: center;

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
				}

				&.th1 {
					left: 50%;
					top: -40rpx;
					transform: translateX(-55%);
				}

				&.th2 {
					left: 20rpx;
					top: 20rpx;
				}

				&.th3 {
					right: 40rpx;
					top: 20rpx;
				}
			}

			.c_bg {}
		}

		.bd-rank {
			width: 690rpx;
			background: #070202;
			border-radius: 38rpx 38rpx 38rpx 38rpx;
			position: relative;
			z-index: 1;
			margin: 0 auto 0;
			padding: 10rpx 0;

			.rank-item {
				padding: 20rpx 30rpx 20rpx 0;
				display: flex;
				align-items: center;
				background: #252525;
				margin: 20rpx 0 0;

				.num {
					min-width: 80rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					font-family: PingFang SC, PingFang SC;
					font-weight: normal;
					font-size: 24rpx;
					color: #ffffff;
				}

				.avatar {
					margin-left: 10rpx;
					width: 84rpx;
					height: 84rpx;
					border-radius: 50%;
					border: 2rpx solid #e40d1d;

					image {
						width: 100%;
						height: 100%;
						border-radius: inherit;
					}
				}

				.name {
					width: 200rpx;
					margin-left: 20rpx;

					font-family: PingFang SC, PingFang SC;
					font-weight: normal;
					font-size: 28rpx;
					color: #ffffff;
				}

				.hang1 {}

				.money {
					flex: 1;
					text-align: right;
					padding-left: 20rpx;

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #e40d88;
				}
			}
		}

		.my-rank {
			width: 100%;
			height: 194rpx;
			background: #010101;
			padding: 30rpx 50rpx 0 20rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 10;

			.my-item {
				display: flex;
				align-items: center;

				.num {
					min-width: 80rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					font-family: PingFang SC, PingFang SC;
					font-weight: normal;
					font-size: 24rpx;
					color: #ffffff;
				}

				.avatar {
					margin-left: 10rpx;
					width: 84rpx;
					height: 84rpx;
					border-radius: 50%;
				}

				.name {
					width: 200rpx;
					margin-left: 20rpx;

					font-family: PingFang SC, PingFang SC;
					font-weight: normal;
					font-size: 28rpx;
					color: #ffffff;
				}

				.hang1 {}

				.money {
					flex: 1;
					text-align: right;
					padding-left: 20rpx;

					font-family: PingFang SC, PingFang SC;
					font-weight: normal;
					font-size: 28rpx;
					color: #ffffff;
				}
			}
		}
	}
</style>